import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import compression from "vite-plugin-compression";
import { createHtmlPlugin } from "vite-vue-plugin-html";
import postcsspxtoviewport from "postcss-px-to-viewport";
import { loadEnv } from "vite";

import path from "path";

function getAppConfigSrc() {
  return `/APP_CONFIG.js`;
}
// https://vitejs.dev/config/

export default ({ command, mode }) => {
  let env = loadEnv(mode, process.cwd());
  const isBuild = mode === "production";
  return {
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
      createSvgIconsPlugin({
        // 指定要缓存的文件夹
        iconDirs: [path.join(import.meta.dirname, "src/assets/icons/svg")],
        // 指定symbolId格式
        symbolId: "icon-[dir]-[name]",
      }),
      compression({
        verbose: true,
        disable: false,
        threshold: 10240, // 压缩阈值，小于这个值的文件将不会被压缩（单位为字节）这里就是大于 10kb 菜压缩
        algorithm: "gzip", // 压缩算法
        ext: ".gz", // 压缩文件后缀名
      }),
      createHtmlPlugin({
        inject: {
          data: {},
          tags: isBuild
            ? [
                {
                  tag: "script",
                  attrs: {
                    src: getAppConfigSrc(),
                  },
                },
              ]
            : [],
        },
      }),
    ],
    resolve: {
      alias: {
        "@": path.join(import.meta.dirname, "/src"),
        "@common":path.join(import.meta.dirname, "/../../packages/common/src"),
      },
      extensions: [".js", ".json", ".vue"],
    },
    build: {
      target: "es2015",
      cssTarget: "chrome80",
      brotliSize: false, // 进行压缩计算
      chunkSizeWarningLimit: 2000, // chunk 大小警告的限制（以 kbs 为单位）
      rollupOptions: {
        output: {
          // 打包输出的配置
          chunkFileNames: "static/js/[name]-[hash].js",
          entryFileNames: "static/js/[name]-[hash].js",
          assetFileNames: "static/[ext]/[name]-[hash].[ext]",
        },
      },
    },
    css: {
      postcss: {
        plugins: [
          postcsspxtoviewport({
            unitToConvert: "px", // 要转化的单位
            viewportWidth: 1920, // UI设计稿的大小
            unitPrecision: 6, // 转换后的精度
            viewportUnit: "vw", // 转换后的单位
            fontViewportUnit: "vw", // 字体转换后的单位
            propList: ["*"], // 能转换的属性，*表示所有属性，!border表示border不转
            selectorBlackList: ["ignore-"], // 指定不转换为视窗单位的类名，
            minPixelValue: 1, // 最小转换的值，小于等于1不转
            mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false
            replace: true, // 是否转换后直接更换属性值
            exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
            include: [], // 包含那些文件或者特定文件
            landscape: false, // 是否处理横屏情况
          }),
        ],
      },
    },
    server: {
      port: 4862,
    },
  };
};
